<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
    <link rel="stylesheet" href="../../css/utils/toastr.min.css" />
	<title></title>
	<style>
		* {
			margin: 0px;
			padding: 0px;
		}
		div {
			margin: 0px;
			padding: 0px;
		}
		.table-panel {
			overflow: auto;
		}
		.tab-content>.tab-pane {
			margin-left: 1%;
			width: 84%;
			display: inline-block;
		}
		.table {
			width: 1800px;
			margin-bottom: 0px;
		}
		.client-details-container {
		    float: left;
			width: 15%;
		    padding: 0px 10px;
		    border: 1px solid #d6d6d6;
		}
		.header-container {
			margin-top: 10px;
			width: 100%;
			text-align: center;
		}
		.header-img {
			width: 80px;
			height: 80px;
			border-radius: 40px;
		}
		.name-div {
			margin-top: 10px;
			color: #8B8B8B;
		}
		.user-info-container {
			margin-top: 30px;
		}
		.title-span {
			color: #8B8B8B;
		}
		.content-span {
			color: #f4915a;
		}
		.remark-div {
			margin-top: 30px;
		}
		.remark-div div span.label {
		    display: inline-block;
		    margin-right: 6px;
		    background-color: #d0f0ee;
		    color: #11B5AB;
		    font-size: 14px;
		    margin-top: 5px;
		    font-weight: normal;
	    }
		.uiwm-relation-fcont {
			margin-top: 30px;
			margin-bottom: 20px;
		    margin-left: auto;
		    margin-right: auto;
		}
		h4 {
		    font-size: 14px;
		    color: #666666;
		}
		.uiwm-relation-fcont div span.label {
			display: inline-block;
			margin-right: 6px;
		    background-color: #d0f0ee;
		    color: #11B5AB;
		    font-size: 14px;
		    margin-top: 5px;
		    font-weight: normal;
		}
		.uiwm-relation-article {
			margin-bottom: 20px;
		}
		.uiwm-relation-article h4 {
		    font-size: 14px;
		    color: #666666;
		}
		.uiwm-relation-article div img.header {
		    width: 50px;
		    height: 50px;
		    border-radius: 25px;
		}
		#peoperHeaders {
			text-align: center;
		}
		.headers-content {
			display: inline-block;
			width: 120px;
			position: relative;
		}
		.contact-line {
			position: absolute;
			left: 87px;
			top: 25px;
			width: 66px;
			height: 2px;
			background-color: #D4D4D4;
		}
		.btn-edit-container {
			margin-top: 20px;
			text-align: center;
		}
		.btn-edit-container .btn-default {
			width: 140px;
		}
		.btn-container {
			margin-top: 20px;
			text-align: center;
		}
		.btn-container .btn-default {
			width: 140px;
		}
		.modal-body {
			padding-bottom: 50px;
			text-align: left;
		}
		.modal-body .content div {
			margin: 20px 40px 0px 40px;
		}
		.modal-body .content\n div span {
			margin-left: 10px;
		}
		/*红包封面设置*/
		.the-cover {
			padding: 30px 50px;
		}
		.words-limit {
			position: relative;
			margin-bottom: 20px;
		}
		.words-limit .number-words {
			position: absolute;
			top: 9px;
			right: 20px;
			color: #4f4f4f;
		    font-size: 11px;
		}
		.red-packet-preview {
			padding-top: 20px;
		}
		.goods-preview {
			width: 200px;
			border: 1px solid #E1E1E1;
			color: #303030;
		}
		.goods-preview .title {
			height: 35px;
			line-height: 35px;
			text-align: center;
			border-bottom: 1px solid #E1E1E1;
		}
		.goods-preview .body {
			padding: 20px 10px;
		}
		.edit-preview {
			padding: 10px 0;
			min-height: 80px;
		}
		.goods-preview .footer {
			height: 35px;
			line-height: 35px;
			text-align: center;
			border-top: 1px solid #E1E1E1;
		}
		.red-preview {
			width: 200px;
			height: 285px;
			padding: 0 25px;
			background: url(../../img/redPacket/red-packet-back.png) no-repeat;
			background-size: 100% 100%;
			color: #FFCC2F;
			text-align: center;
		}
		.preview-font {
			margin-top: 120px;
		}
		.mf-align {
			text-align: center;
		}
		.amount-content {
		    margin-left: 50px;
		}
		.amount-content .amount-title {
			font-size: 14px;
			color: #4F4F4F;
			font-weight: 500;
			font-family: "MicrosoftYaHei-Bold";
		}
		.amount-content .amout-input-div {
			margin-top: 10px;
			margin-left: 15px;
			width: 260px;
			display: inline-block;
		}
		.modal-header .title-span {
			font-size: 15px;
			font-family: "MicrosoftYaHei-Bold";
			color: #666666;
		}
		.modal-header .title-tips-span {
			margin-left: 10px;
			font-size: 12px;
			font-family: "MicrosoftYaHei";
			color: #666666;
		}
		.btn-primary:focus, .btn-primary:hover {
			color: #fff;
			background-color: #2aeee2;
			border-color: #2aeee2;
		}
		.btn-primary {
		    padding: 6px 40px;
		    color: #fff;
		    background-color: #11B5AB;
		    border-color: #11B5AB;
		}
		.cancle {
		    color: #7B7B7B;
		    background-color: #F3F3F3;
		    border-color: #F3F3F3;
		}
		.text-red {
		    color: #ee4747;
		}
		.add-impression {
			padding-left: 0px;
		}
		.label-div {
			position: relative;
			display: inline-block;
			height: 20px;
		}
		.impression-label-group .label {
			display: inline-block;
			padding: 3px 15px;
			margin: 7px 10px 20px 0px;
			background-color: #E1E1E1;
			color: #848484;
			cursor: pointer;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}
		.impression-label-group .label.active {
			background-color: #11B5AB;
			color: #fff;
		}
		.impression-label-group .del-span {
			cursor: pointer;
			position: absolute;
			right: 9px;
			top: 0px;
			font-size: 10px;
			opacity: 0;
		}
		.validTime {
			line-height: 34px;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="tab-content">
			<div class="client-details-container">
				<div class="header-container">
					<img class="header-img" />
					<div class="name-div"></div>
				</div>
				<div class="user-info-container">
					<div><span class="title-span">成功指数：</span><span id="integral" class="content-span"></span></div>
					<div><span class="title-span">性别：</span><span id="sex" class="title-span"></span></div>
					<div><span class="title-span">姓名：</span><span id="nickName" class="title-span"></span></div>
					<div><span class="title-span">地址：</span><span id="addr" class="title-span"></span></div>
					<div><span class="title-span">电话：</span><span id="phone" class="title-span"></span></div>
				</div>
				<div id="editClient" class="btn-edit-container">
	                <button type="button" class="btn btn-default" data-toggle="modal">客户编辑</button>
                </div>
                <div class="btn-container">
	                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#envelopeModal">给该客户发红包</button>
                </div>
                <div id="vouchersAndDiscount" class="btn-container">
	                <button type="button" class="btn btn-default" data-toggle="modal">赠送代金券/优惠券</button>
                </div>
				<div class="remark-div">
					<h4>印象</h4>
					<div id="impressionTags">
                    		<!--<span class="label">装修</span>
                    		<span class="label">设计</span>
                    		<span class="label">互联网</span>-->
                    </div>
				</div>
				<div class="uiwm-relation-fcont">
                    <h4>标签</h4>
                    <div id="customerTags">
                    		<!--<span class="label">装修</span>
                    		<span class="label">设计</span>
                    		<span class="label">互联网</span>-->
                    </div>
               </div>
			</div>
			<div class="tab-pane">
				<div class="uiwm-relation-article">
                    <h4>最近的人</h4>
                    <div id="peoperHeaders">
                    		<!--<div class="headers-content">
                    			<img class="header" src="../../img/test-back.jpg" />
                    		</div>-->
                    </div>
                </div>
				<div class="table-panel">
					<table class="table table-bordered table-hover table-striped">
						<thead>
							<tr>
								<th>序号</th>
								<th>文章标题</th>
								<th>所在层级</th>
								<th>最近一次阅读</th>
								<th>转发朋友/群</th>
								<th>转发朋友圈</th>
								<th>阅读次数</th>
								<th>转发阅读人数</th>
								<th>最近三次阅读时长</th>
								<th>是否报名</th>
								<th>是否加微信</th>
								<th>打电话：<br>（次数）</th>
								<th>下载代金券：<br>（次数）</th>
								<th>发生购买：<br>（次数）</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="readNumbody">
						</tbody>
					</table>
				</div>
				<nav id="page" class="text-center" aria-label="Page navigation">
					<ul class="pagination">
					</ul>
				</nav>
			</div>
		</div>
		<!-- Modal -->
		<div class="modal fade bs-example-modal-lg" id="buyModal" tabindex="-1" role="dialog" aria-labelledby="buyModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
					    	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					    	<h4 class="modal-title" id="buyModalLabel">购买衣服</h4>
					</div>
				  	<div class="modal-body">
				    		<div class="content"><span>商 品：</span><span>范思哲卫衣</span></div>
				    		<div class="content"><span>数 量：</span><span>1</span></div>
				    		<div class="content"><span>购买时间：</span><span>2018-05-01</span></div>
				    		<div class="content"><span>购买备注：</span><span>请商家发货快一点</span></div>
				  	</div>
				</div>
			</div>
		</div>
		<div class="modal fade bs-example-modal-lg" id="enrollModal" tabindex="-1" role="dialog" aria-labelledby="enrollModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
					    	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					    	<h4 class="modal-title" id="enrollModalLabel">已经报名</h4>
					</div>
				  	<div class="modal-body">
				    		<div class="content"><span>姓名:</span><span id="elName"></span></div>
				    		<div class="content"><span>电话:</span><span id="elPhone"></span></div>
				    		<div class="content"><span>报名时间:</span><span id="elTime"></span></div>
				    		<div class="content"><span>留言:</span><span id="elRemark"></span></div>
				  	</div>
				</div>
			</div>
		</div>
		<div class="modal fade bs-example-modal-lg" id="vouchersModal" tabindex="-1" role="dialog" aria-labelledby="vouchersModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
					    	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					    	<h4 class="modal-title" id="vouchersModalLabel">华为手机代金券</h4>
					</div>
				  	<div class="modal-body">
				    		<div class="content"><span>数 量：</span><span>1</span></div>
				    		<div class="content"><span>下载时间：</span><span>2018-05-01</span></div>
				  	</div>
				</div>
			</div>
		</div>
		<!--红包封面MODEL-->
		<div class="modal fade" id="envelopeModal" tabindex="-1" role="dialog" aria-labelledby="envelopeModalLabel">
		  	<div class="modal-dialog" role="document">
			    <div class="modal-content">
			      	<div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        <h4 class="modal-title" id="envelopeModalLabel">发放红包</h4>
			     	</div>
				    <div class="modal-body">
				    		<div class="amount-content">
				    			<span class="amount-title">红包金额</span>
				    			<div class="amout-input-div">
				    				<input id="amount" type="number" class="form-control" placeholder="单人发放金额" />
				    			</div>
				    		</div>
				        	<div class="the-cover">
				        		<div class="words-limit">
								    <input id="actName" type="text" maxlength="10" class="form-control input-words" open-data="activityName" placeholder="活动名称">
								    <span class="number-words"><span>0</span>/10</span>
								</div>
								<div class="words-limit">
								    <input id="merchName" type="text" maxlength="10" class="form-control input-words" open-data="merchantsName" placeholder="商户名称">
								    <span class="number-words"><span>0</span>/10</span>
								</div>
								<div class="words-limit">
								    <input id="wishWord" type="text" maxlength="20" class="form-control input-words" open-data="sentiment" placeholder="祝福语">
								    <span class="number-words"><span>0</span>/20</span>
								</div>
								<div class="red-packet-preview space-between">
									<div class="goods-preview">
										<div class="title">商户名称</div>
										<div class="body">
											<p>你收到了一个红包</p>
											<h6 class="text-8e">5月15日</h6>
											<p class="edit-preview">你参与<span class="text-8e activityName"></span>，成功获得<span class="text-8e merchantsName"></span>赠送的红包。</p>
											<p>点击拆开红包即可获得现金</p>
										</div>
										<div class="footer text-11B5AB">详情&nbsp;>></div>
									</div>
									<div class="red-preview">
										<p class="preview-font merchantsName"></p>
										<p class="sentiment"></p>
									</div>
								</div>
				        	</div>
				    </div>
			      	<div class="modal-footer mf-align">
			        		<button id="confirmRedPack" type="button" class="btn btn-theme btn-width120">确认发放</button>
			      	</div>
			    </div>
		  	</div>
		</div>
		<div class="modal fade bs-example-modal-lg" id="editClientModal" tabindex="-1" role="dialog" aria-labelledby="editClientModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<span class="title-span">补全资料</span><span class="title-tips-span">当线索的电话和微信号录入后，系统会根据线索与您的关系转换成认识或熟悉</span>
					    	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					</div>
				  	<div class="modal-body">
				  		<form class="form-horizontal m-t-md nice-validator n-default" id="editClientForm">
				            <div class="form-group">
				              <label for="recipient-name" class="control-label col-md-4"><!--<span class="text-red">*</span>--> 客户姓名：</label>
				              <div class="col-md-6 no-padder">
				                <input type="text" class="form-control" value="" name="username" id="username"  placeholder="请填写名片名称">
				                <input type="hidden" class="form-control" id="customerID">
				              </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"> 年龄：</label>
				              <div class="col-md-6 no-padder">
				                <input type="text" class="form-control" v-model="mpname" name="age" id="age" placeholder="输入您的姓名" value="" >
				              </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"> 请选择：</label>
				              <div class="col-md-6 no-padder">
					              <select id="numberSelect" class="form-control">
								  	<option value="1">手机号</option>
								  	<option value="2">微信号</option>
								  </select>
							  </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"></label>
				              <div class="col-md-6 no-padder">
				                <input type="text" class="form-control" v-model="mptelephone" name="clientPhone" id="clientPhone"  placeholder="请输入正确的手机号码" value="">
				              </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"><span class="text-red">*</span> 成交状态：</label>
				              <div class="col-md-6 no-padder">
				              	<select id="tradeStatusSelect" class="form-control">
								  	<option value="1">初步沟通</option>
									<option value="2">确认意向</option>
									<option value="3">商务洽谈</option>
									<option value="4">签约成交</option>
								</select>
				              </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"><span class="text-red">*</span> 印象：</label>
				              <div class="col-md-4">
				                <input type="text" class="form-control" v-model="mpjobposition" name="note" id="note" placeholder="请输入印象标签">
				              </div>
				              <div class="col-md-2 add-impression">
				              	<button type="button" class="btn btn-default" id="impressionBtn">添加印象</button>
				              </div>
				            </div>
				            <div class="form-group" style="text-align: center;">
					            <div class="impression-label-group">
								</div>
							</div>
				            <div class="form-group">
				              <div class="col-md-offset-4 col-md-6 no-padder m-t-sm">
				              	<button id="cancle" class="btn btn-primary cancle" data-dismiss="modal" aria-label="Close">取消</button>
				                <button type="submit" id="save" class="btn btn-primary" >保存</button>
				              </div>
				            </div>
				         </form>
				  	</div>
				</div>
			</div>
		</div>
		<div class="modal fade bs-example-modal-lg" id="givingVouchersModal" tabindex="-1" role="dialog" aria-labelledby="givingVouchersModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<span class="title-span">赠送代金券</span>
					    	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					</div>
				  	<div class="modal-body">
				  		<form class="form-horizontal m-t-md nice-validator n-default" id="givingVouchersForm">
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"> 类型选择：</label>
				              <div class="col-md-6 no-padder">
					              <select id="vouchersSelect" name="vouchersSelect" class="form-control">
					              	<option value="">--类型选择--</option>
								  	<option value="1">代金券</option>
								  	<option value="2">打折券</option>
								  </select>
							  </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"> 金额选择：</label>
				              <div class="col-md-6 no-padder">
					              <select id="amountSelect" name="amountSelect" class="form-control">
					              	<option value="">--请选择券--</option>
								  </select>
							  </div>
				            </div>
				            <div class="form-group">
				              <label for="message-text" class="control-label col-md-4"> 有效期：</label>
				              <div class="col-md-6 no-padder">
				              	<span class="validTime"></span>
							  </div>
				            </div>
				            <div class="form-group">
				              <div class="col-md-offset-4 col-md-6 no-padder m-t-sm">
				              	<button id="cancle" class="btn btn-primary cancle" data-dismiss="modal" aria-label="Close">取消</button>
				                <button type="submit" id="save" class="btn btn-primary" >保存</button>
				              </div>
				            </div>
				         </form>
				  	</div>
				</div>
			</div>
		</div>
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.validate.min.js"></script>
	<script type="text/javascript" src="../../js/utils/page.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script type="text/javascript" src="../../js/utils/toastr.min.js" ></script>
	<script>
		var userID = $.cookie("userID");
		var companyID = $.cookie("companyID");
		var customerID = base.getParameter("customerID");
		var roleType = $.cookie("roleType");
		var tempPageNo = 1, customerImpressionID,goodsID;
		$(function() {
			toastr.options = {
                "closeButton": true,
                "timeOut": 2000,
                "positionClass": "toast-center"
            };
			customerInfo();
			getCustomerReadInfo();
		})
		//客户详情
		function customerInfo() {
			var data = {
				userID:userID,
				companyID:companyID,
				customerID:customerID
			}
			base.postData(base.url.customerInfo, data, callbackCustomerInfo);
		}
		function callbackCustomerInfo(data) {
			if (data.success) {
				$(".header-img").attr("src", data.context.headImgUrl);
				$(".name-div").text(data.context.nickName||"");
				$("#integral").text(data.context.point||0);
				$("#sex").text(data.context.sex==1?"男":data.context.sex==2?"女":"未知");
				$("#nickName").text(data.context.nickName||"");
				$("#addr").text(data.context.area||"");
				$("#phone").text(data.context.phone||"");
				var customerHtml = '';
				for(var item of data.context.lables) {
					customerHtml+='<span class="label">'+item.lableName+'</span>'
				}
				$("#customerTags").html(customerHtml);
				var impressionHtml = '';
				for(var item of data.context.customerImpressionList) {
					impressionHtml+='<span class="label">'+item.impressionName+'</span>'
				}
				$("#impressionTags").html(impressionHtml);
				$("#peoperHeaders").html(getHeaderImgHtml(data.context.articleList));
			}
		}
		function getHeaderImgHtml(list) {
			var html = '';
			for(var index in list) {
				html+='<div class="headers-content">'
				html+='		<img class="header" src="'+list[index].headImagUrl+'" />'
				html+='		<div class="name-div">'+list[index].nickName+'</div>'
				if (index != list.length -1) {
					html+='		<div class="contact-line"></div>'
				}
				html+='</div>'
			}
			return html;
		}
		//阅读信息列表
		function getCustomerReadInfo() {
			var data = {
				userID:userID,
				companyID:companyID,
				customerID:customerID,
				pageNo: tempPageNo
			}
			base.postData(base.url.customerReadInfo, data, callbackCustomerReadInfo);
		}
		function callbackCustomerReadInfo(data) {
			if (data.success) {
				if (tempPageNo == 1) {
					var _totalPage = Math.ceil(data.context.totalPage/10)||1;
					//初始化分页
					var page = {
						pageIndex:1,//初始页
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:_totalPage,//总页数
						onPageClick: function(page) {
							tempPageNo = page.currentPage;
							getCustomerReadInfo();
							$("#page").initPage(page);
			    			return false;  //默认的翻页事件
					    }
					};
				}
				$("#page").initPage(page);
				$("#readNumbody").html(getCustomerReadListHtml(data.context.readList));
			}
		}
		function getCustomerReadListHtml(list) {
			var html = '';
			for (var index in list) {
				var readTime = "";
				for (var j=0; j<list[index].everyReadTime.length; j++) {
					readTime += (j+1)+"/"+list[index].everyReadTime[j]+"-"+(list[index].everyReadTime[j]+10)+"s ";
				}
				var readTime = "";
				for (var j=0; j<list[index].everyReadTime.length; j++) {
					var time = "";
					if (list[index].everyReadTime[j] < 60) {
						time = list[index].everyReadTime[j] + "-" + (list[index].everyReadTime[j] + 10) + "秒 ";
					}else{
						time = parseInt(list[index].everyReadTime[j]/60);
						if (time < 2) {
							time = "1-2分钟 ";
						}else if (time < 5) {
							time = "2-5分钟 ";
						}else if (time >= 5) {
							time = "5分钟以上 ";
						}
					}
					readTime += (j+1)+"/"+time;
				}
				html += '<tr>'
				html += '	<td>'+(index*1+1)+'</td>'
				html += '	<td>'+list[index].articleTitle+'</td>'
				html += '	<td>'+list[index].theLevel+'</td>'
				html += '	<td>'+list[index].lastVisitTime+'</td>'
				html += '	<td>'+list[index].forwardGroupNum +'</td>'
				html += '	<td>'+list[index].forwardFriendNum+'</td>'
				html += '	<td>'+list[index].readNum+'</td>'
				html += ' 	<td>'+list[index].shareReadCount+'</td>'
				html += '	<td>'+readTime+'</td>'
				html += '	<td>'+(list[index].isEnroll?"是":"否") +'</td>'
				html += '	<td>'+(list[index].isJoinWX?"是":"否") +'</td>'
				html += '	<td>'+list[index].callNum +'</td>'
				html += '	<td>'+list[index].downloadVoucherNum +'</td>'
				html += '	<td>'+list[index].orderNum +'</td>'
				html += '	<td>'
				for (var i in list[index].pluginList) {
					if (list[index].pluginList[i].pluginType == 1) {
						html += '<button class="btn btn-default enroll-detail" data-articleID = "'+list[index].articleID+'" data-articleUserID = "'+list[index].articleUserID+'">报名详情</button>'
					}
				}
				html += '		<button class="btn btn-default echarts-detail" data-articleID = "'+list[index].articleID+'">脉络图</button>'
				html += '	</td>'
				html += '</tr>'
			}
			return html;
		}
		//获取客户报名详情（单个客户）
		function getEnrollInfo(articleID, articleUserID) {
			var data = {
				articleUserID:articleUserID,
				companyID:companyID,
				articleID:articleID,
				customerID: customerID
			}
			base.postData(base.url.getEnrollInfo, data, callbackGetEnrollInfo);
		}
		function callbackGetEnrollInfo(data) {
			if (data.success) {
				$("#elName").text(data.context.userName);
				$("#elPhone").text(data.context.phone);
				$("#elTime").text(data.context.enrollTime);
				$("#elRemark").text(data.context.remark);
			}
		}
		$("#readNumbody").on("click", ".enroll-detail", function() {
			getEnrollInfo($(this).attr("data-articleID"), $(this).attr("data-articleUserID"));
			$('#enrollModal').modal('show');
		})
		//脉络图
		$("#readNumbody").on("click", ".echarts-detail", function() {
			var articleID = $(this).attr("data-articleID");
			window.parent.location = "../index.html?path=myExtension/connectionChart.html?articleID="+articleID;
		})
		//文字限制
		$(".input-words").on("keyup", function() {
			$(this).closest(".words-limit").find(".number-words span").text($(this).val().length);
			$("."+$(this).attr("open-data")).text($(this).val());
		});
		$("#confirmRedPack").on("click", function() {
			$('#confirmRedPack').attr("disabled",true); //防止重复对一个人发放红包
			if ($("#amount").val() == null || $("#amount").val() == "" || $("#amount").val() < 1) {
				toastr.error("红包金额不能小于1元");
				return;
			}
			var data = {
				userID:userID,
				companyID:companyID,
				customerID: customerID,
				roleType:roleType,
				redPackTitle: $("#actName").val(),
				redPackSum: $("#amount").val(),
				merchantName: $("#merchName").val(),
				wish: $("#wishWord").val()
			}
			base.postData(base.url.addPersonalRedPack, data, function(data) {
				$('#confirmRedPack').attr("disabled",false); 
				if (data.success) {
					$("#envelopeModal").modal("hide");
					toastr.success(data.msg);
				} else {
					toastr.error(data.msg);
				}
			});
		})
		$("#editClient").on("click", "button", function() {
			getCustomerInfo();
			getCustomerImpressionList();
		})
		//获得客户补全的资料
		function getCustomerInfo() {
			var data = {
				customerID:customerID
			}
			base.postData(base.url.getCustomerInfo, data, callbackGetCustomerInfo);
		}
		function callbackGetCustomerInfo(data) {
			if (data.success) {
				if (data.context) {
					$("#username").val(data.context.userName);
					$("#age").val(data.context.old);
					$("#clientPhone").val(data.context.phone);
					$('#numberSelect option[value='+(data.context.type||1)+']').attr("selected", true); 
					var tradeStatusSelect = document.getElementById("tradeStatusSelect");
					for (var i = 0; i < tradeStatusSelect.options.length; i++){  
				        if (tradeStatusSelect.options[i].value == data.context.tradeStatus){  
				            tradeStatusSelect.options[i].selected = true;  
				            break;  
				        }  
				   	}
				}
			}
			$("#editClientModal").modal("show");
		}
		//编辑客户资料验证和提交
		$("#editClientForm").validate({
		    submitHandler: function() {
		    		var _numberSelect = $('#numberSelect option:selected').val();
		    		var _tradeStatusSelect = $('#tradeStatusSelect option:selected').val();
		    		var data = {
					customerID:customerID,
					userName:$("#username").val(),
					old:$("#age").val(),
					phone:$("#clientPhone").val(),
					tradeStatus:_tradeStatusSelect,
					remark:$("#note").val(),
					type:_numberSelect
				}
				base.postData(base.url.completeCustomerInfo, data, callbackCompleteCustomerInfo);
		    }
		});
		function callbackCompleteCustomerInfo(data) {
			if (data.success) {
				toastr.success("保存资料成功");
				//重新初始化数据
				$("#username").val("");
				$("#age").val("");
				$("#phone").val("");
				$("#note").val("");
				$("#numberSelect option[value='1']").attr("selected", true); 
				$("#tradeStatusSelect option[value='1']").attr("selected", true); 
				$('#editClientModal').modal('hide');
			}
		}
		function getCustomerImpressionList() {
			var params = {
				customerID:customerID
			}
			base.postData(base.url.getCustomerImpressionList, params, function(data) {
				var impressionList = data.context.customerImpressionList;
				var html = ''
				for (var i=0; i<impressionList.length; i++) {
					html += '<div class="label-div">';
					html += '	<span class="label label-default" data-param="'+impressionList[i].id+'">'+impressionList[i].impressionName+'</span>';
					html += '	<span class="del-span" data-param="'+impressionList[i].id+'">X</span>';
					html += '</div>';
				}
				$(".impression-label-group").html(html);
			});
		}
		//监听选择手机或微信的select，输入框提示语
		$("#numberSelect").change(function() {
			var _type = $(this).children('option:selected').val();
			$("#phone").attr('placeholder',_type == 1 ? '请输入正确的手机号码':'请输入正确的微信号');
		})
		$(".add-impression").on("click", "button", function() {
			var params = {
				customerImpressionID: customerImpressionID,
				impressionName: $("#note").val(),
				customerID: customerID,
			}
			base.postData(base.url.updateCustomerImpression, params, function(data) {
				if (data.success) {
					customerImpressionID = null;
					$("#note").val("");
					getCustomerImpressionList();
					toastr.success(data.msg);
				} else {
					toastr.error(data.msg);
				}
			});
		})
		$(".impression-label-group").on("click", ".label", function() {
			customerImpressionID = $(this).attr("data-param");
			var _impressionLableTagName = $(this).text();
			$("#note").val(_impressionLableTagName);
			$("#impressionBtn").text("修改印象");
		})
		$(".impression-label-group").on("click", ".del-span", function() {
			customerImpressionID = $(this).attr("data-param");
			base.postData(base.url.delCustomerImpression, {customerImpressionID: customerImpressionID}, function(data) {
				if (data.success) {
					getCustomerImpressionList();
					toastr.success(data.msg);
				} else {
					toastr.error(data.msg);
				}
			});
		})
		//鼠标悬浮
		$(".impression-label-group").on("mouseover mouseout", ".label-div", function(event){
			if(event.type == "mouseover"){
				//鼠标悬浮
				$(this).find(".del-span").css("opacity", "1");
			}else if(event.type == "mouseout"){
				//鼠标离开
				$(this).find(".del-span").css("opacity", "0");
			}
		});
		$("#vouchersAndDiscount").on("click", "button", function() {
			getVouchersAndDiscountCoupons();
		})
		function getVouchersAndDiscountCoupons() {
			base.postData(base.url.getVouchersAndDiscountCoupons, {companyID:companyID}, function(data) {
				if (data.success) {
					var vouchersSt = document.getElementById("vouchersSelect");
					//券的类型下拉框发生改变事件
					vouchersSt.onchange = function() {
						var _vouchersType = this.value;
						var _vouchersList = data.context.vouchersAndDiscountCouponsList;
						//获得优惠额度下拉框对象
						var amountSt = document.getElementById("amountSelect");
						amountSt.innerHTML = "<option value=''>--请选择券--</option>";
						for (var i=0; i<_vouchersList.length; i++) {
							if (_vouchersType == _vouchersList[i].vouchersType) {
								$(".validTime").text(_vouchersList[i].validTime);
								if (_vouchersType == 1) {
									var option = document.createElement("option");
							        option.innerHTML = "全场商品" + _vouchersList[i].discount + "元代金券";
							        option.value = _vouchersList[i].vouchersID;
							        amountSt.appendChild(option);
								} else {
									goodsID = _vouchersList[i].goodsID;
									var option = document.createElement("option");
							        option.innerHTML = (_vouchersList[i].goodsName.length>10? _vouchersList[i].goodsName.substring(0,10):_vouchersList[i].goodsName.length) + "..." + _vouchersList[i].discount + "折扣";
							        option.value = _vouchersList[i].vouchersID;
							        amountSt.appendChild(option);
								}
							}
					    }
					}
					$('#givingVouchersModal').modal('show');
				} else {
					toastr.error(data.msg);
				}
			});
		}
		//赠送券验证和提交
		$("#givingVouchersForm").validate({
		    rules: {
		      	vouchersSelect: "required",
		      	amountSelect: "required"
		    },
		    messages: {
		      	vouchersSelect: "请选择优惠的类型",
		      	amountSelect: "请选择额度"
		    },
		    submitHandler: function() {
		    		var _vouchersType = $('#vouchersSelect option:selected').val();
		    		var _vouchersID = $('#amountSelect option:selected').val();
		    		var params = {
					customerID:customerID,
					vouchersID:_vouchersID,
					userID:userID,
					vouchersType:_vouchersType,
					goodsID:goodsID,
					companyID:companyID,
					channel:1
				}
				base.postData(base.url.addUserVouchers, params, function(data) {
					toastr.success(data.msg);
					if (data.success) {
						$('#givingVouchersModal').modal('hide');
					}
				});
		    }
		});
	</script>
</body>
</html>
